<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>找名医</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="../css/my-app.css">
    <link rel="stylesheet" href="../css/ekang.css"/>
    <!--医生列表-->
    <link rel="stylesheet" href="../css/chooseDoctor_css/doctorList.css"/>
</head>
<body>

<div class="views tabs toolbar-through">
    <!--导航条-->
    <!-- Second view (for second wrap)-->
    <div id="view" class="view view-main tab active">
        <!-- We can make with view with navigation, let's add Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner" style="background-color: #38a16d">
                <div class="left" id="back">
                    <i class="icon icon-back color-white" style="color: white"></i>
                    <span style="color: white">返回</span>
                </div>
                <div class="center sliding" style="color: white">医院医生</div>
            </div>
        </div>

        <div class="pages navbar-through">
            <div data-page="index-2" class="page page-on-center">
                <div class="page-content pull-to-refresh-content infinite-scroll">
                    <!-- 默认的下拉刷新层 -->
                    <div class="pull-to-refresh-layer">
                        <div class="preloader"></div>
                        <div class="pull-to-refresh-arrow"></div>
                    </div>

                    <div class="main-content" style="margin-top: 0">

                        <!--医生列表-->
                        <div id="doctorItems"></div>

                        <!--搜索无结果-->
                        <div id="searchIcon" style="position: absolute;display: none; margin-top: 173px;width: 100%;text-align: center">
                            <img src="../img/icon-girl.png" alt="小女孩" style="width: 125px;height: 61px;left: 50%"/>
                            <p style="font-size: 13px;color: #808080">没有符合条件的医生</p>
                        </div>

                        <!-- 加载提示符 -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/ekang.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script>
    $(function () {
        var     childNodes = [], //地区
                departmentNodes = [],  // 科室
                pageIndex = 1;// 页码

        var hospital_ID = getQueryString("hospital-id");
        var department_id = getQueryString("department-id");

        var option = {

            // 获取医生列表
            getDoctorList: function () {
                $.ajax({
                    type: 'GET',
                    url: textUrl+'/doctor/doctorIndex',
                    data: {
                        hospital_id: hospital_ID,
                        department_id: department_id,
                        page_size: 20,
                        page_index: pageIndex
                    },
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret == 0) {
                            if(result.data.length == 0){
                                $('#searchIcon').show();
                            }else{
                                $('#searchIcon').hide();
                            }

//                            alert("医院：" + hospital_ID + "科室：" +department_id+ "城市："+city_code);

                            var item = '';
                            $.each(result.data, function (i, o) {
                                var taginfo = '';
                                $.each(o.tag_info, function (j, t) {
                                    taginfo += t.tag_name + ' ';
                                });

                                var paramObj = new Object();
                                paramObj.doctorId = o.doctor_id;
                                paramObj.uid = o.uid;
                                paramObj.userName = o.user_name;
                                paramObj.headPic = o.avatar_file;
                                paramObj.hospitalName = o.hospital_name;
                                paramObj.jobName = o.job_name;
                                paramObj.departmentName = o.department_name;
                                paramObj.tagInfo = taginfo;

                                item+= '<div class="docterDetail" data-name="'+o.user_name+'" data-id="'+o.doctor_id+'" onclick="docterDetail($(this))" style="position: relative;height: 60px;width: 100%;background-color: white;border-bottom: 1px solid #e6e6e6">';
                                item+= '<img src="' + o.avatar_file + '" alt="头像" class="top-user-img"/>';
                                item+= '<span class="message top-user-name">' + o.user_name +'</span>';
                                item+= '<span class="message top-user-name" style="left: 111px;top: 13px;font-size: 11px;color: #808080">' + o.job_name + '</span>';
                                item+= '<span class="message top-user-detail">' + o.hospital_name + ' &nbsp;' + o.department_name + '</span>';
                                item+= '<div class="top-user-recommended">';
                                item+= '<span class="recommend">'+ o.rec_index +'%</span>';
                                item+= '<span class="recommend1 message">推荐</span>';
                                item+= '</div>';
                                item+= '</div>';
                            });

                            // 前插新列表元素
//                            ptrContent.find('#doctorItems').html(item);
                            // 加载完毕需要重置
                            myApp.pullToRefreshDone();

                            // 加载数据
                            // 重置加载flag
                            loading = false;
                            if (lastIndex >= maxItems) {
                                // 加载完毕，则注销无限加载事件，以防不必要的加载
                                myApp.detachInfiniteScroll($('.infinite-scroll'));
                                // 删除加载提示符
                                $('.infinite-scroll-preloader').remove();
                                return;
                            }
                            // 如果正在加载，则退出
                            if (pageIndex >1 ){
                                // 添加新条目
                                $('#doctorItems').append(item);
                            }else{
                                $('#doctorItems').html(item);
                            }



                            // 更新最后加载的序号
                            lastIndex = $('#doctorItems').length;

                            if(result.data.length <= 20){
                                $('.infinite-scroll-preloader').hide();
                            }else{
                                $('.infinite-scroll-preloader').show();
                            }

                        }else{

                        }
                    }
                });
            }
        }


        // 初始化医生列表
        option.getDoctorList();

        $('#back').on('click', function () {
            history.back();
        });

        // 刷新
        var myApp = new Framework7();
        var $$ = Dom7;
        // 下拉刷新页面
        var ptrContent = $$('.pull-to-refresh-content');
        // 添加'refresh'监听器
        ptrContent.on('refresh', function (e) {

            pageIndex=1;
            option.getDoctorList();
        });

        // 加载数据
        var loading = false;
        // 上次加载的序号
        var lastIndex = $('#doctorItems').length;
        // 最多可加载的条目
        var maxItems = 20;
        // 注册'infinite'事件处理函数
        $$('.infinite-scroll').on('infinite', function () {
            // 如果正在加载，则退出
            if (loading) return;
            // 设置flag
            loading = true;
            pageIndex++;
            option.getDoctorList();
        });
    });

    function docterDetail(o){

        $.cookie('doctor_name', o.data("name"), { expires: 7,path: '/' });
        $.cookie('doctor_id', o.data("id"), { expires: 7,path: '/' });

        history.back();
    }

</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="../js/weixin2.js"></script>
</body>
</html>